<script setup>
import {ref} from 'vue'
import MyTable from "./components/MyTable.vue"
const goodsList = ref([
    {
        id: 1,
        goods_name: '水果面包',
        goods_price: 10,
        tags: ['水果味', '实惠'],
        inputVisible: false,
        inputValue: ''
    },
    {
        id: 2,
        goods_name: '冰激凌',
        goods_price: 5,
        tags: ['去暑', '冰品'],
        inputVisible: false,
        inputValue: ''
    },
    {
        id: 3,
        goods_name: '棒棒糖',
        goods_price: 1,
        tags: ['甜品', '小份'],
        inputVisible: false,
        inputValue: ''
    },
    {
        id: 4,
        goods_name: '巧克力',
        goods_price: 10,
        tags: ['甜品', '小份'],
        inputVisible: false,
        inputValue: ''
    },
    {
        id: 5,
        goods_name: '辣条',
        goods_price: 3,
        tags: ['辣味', '小份'],
        inputVisible: false,
        inputValue: ''
    }
])
const onRemove = id => {
    goodsList.value = goodsList.value.filter(item => item.id != id)
}
const onRemove2 = (tags) => {
    if(time==0){
        time=1
        return
    }
    if(time==1){
        tags.pop()
        time=0
    }
}
const vFocus = (el) => {el.focus()}
const onInputConfig = row => {
    const val = row.inputValue
    row.inputValue = ''
    row.inputVisible = false
    if (!val || row.tags.indexOf(val)!== -1) {
        return
    }
    row.tags.push(val)
}
const DropItem = (row) => {
    row.tags = []
}
const temp = ref('')
const addition = ref([])
addition.value = goodsList.value
const price = ref('')
const name = ref('')
let time=0;
const index = () => {
    if(temp.value != ''){
        goodsList.value = goodsList.value.filter(item => item.goods_name== temp.value)
    }
    else
    {
        goodsList.value = addition.value
    }
}
const remove = () => {
    goodsList.value = goodsList.value.filter(item => item.id !== item.id)
    addition.value = goodsList.value
}
const add = () => {
    if(name.value!= '' && price.value!= ''&&price.value>0){
        goodsList.value.push({
            id: goodsList.value.length+1,
            goods_name: name.value,
            goods_price: price.value,
            tags: [],
            inputVisible: false,
            inputValue: ''
        })
        name.value = ''
        price.value = ''
    }
    else{
        alert('不正确输入')
    }
}
</script>

<template>
  <h4 class="text-center">食品入库表</h4>

<div class="input-group mb-3">
  <input type="text" class="form-control w-25" placeholder="请输入食品名称" v-model="name">
  <input type="number" class="form-control w-25" placeholder="请输入食品价格" v-model.number="price">
  <button class="btn btn-primary" type="button" @click="add">添加</button>
</div>


<div class="input-group mb-3">
  <input type="text" class="form-control w-25" placeholder="请输入食品名称" v-model="temp">
  <button class="btn btn-success me-3" type="button" @click="index">查询</button>
  <button class="btn btn-danger me-5" type="button" @click="remove">一键清空</button>
</div>
  <MyTable :goodsList="goodsList">
    <template v-slot:header>
        <th scope="col">#</th>
        <th scope="col">食品名称</th>
        <th scope="col">价格</th>
        <th scope="col">标签</th>
        <th scope=col>操作</th>
    </template>
    <template #body="{row,index}">
    <td>{{index + 1}}</td>
    <td>{{row.goods_name}}</td>
    <td>¥{{ row.goods_price }}</td>
    <td>
    <input type="text" v-if="row.inputVisible" class="form-control form-control-sm ipt-tag" v-focus
    v-model="row.inputValue"
    @blur="onInputConfig(row)"
    @keyup.enter="onInputConfig(row)"
     @keyup.esc="row.inputValue = ''"
    />
    <button class="btn btn-outline-primary rounded-pill" v-else @click="row.inputVisible = true">+点评</button>
    <span class="btn btn-outline-dark" v-for="item in row.tags" :key="item" @click="onRemove2(row.tags)">{{item}}</span>
    
    </td>
    <td>
        <button class="btn btn-outline-danger btn-sm me-1" @click="DropItem(row)">清空标签</button>
      <button type="button" class="btn btn-outline-danger btn-sm" @click="onRemove(row.id)">删除</button>
    </td>
</template>
  </MyTable>
</template>

<style scoped>
th{
    text-align: center;
}
td{
    line-height: 30px;
}
.ipt-tag{
    width: 80px;
    display: inline;
}
.input-group .form-control {
  margin-right: 0.5rem;
  border-radius: 0.3rem;
}

.input-group .btn {
  border-radius: 0.3rem;
  font-weight: bold;
}
</style>
